<!-- eslint-disable prettier/prettier -->
<template>
  <view
    class="item-bar"
    @tap.stop="jumpDetailPage(item.id)"
    v-for="(item, index) in list"
    :key="index"
  >
    <image :src="item.picture" class="left-head" mode="scaleToFill"></image>
    <view class="right-info">
      <view class="top_box">
        <view class="title">
          <text style="color: #876fd1" v-show="currentTabIndex == 1">
            {{ index + 1 }}
          </text>

          {{ item.name }}
        </view>
        <TnIcon
          name="more-horizontal"
          color="#000000"
          bold
          size="40rpx"
          v-if="currentTabIndex == 2"
          @tap.stop="setList(item)"
        />
      </view>
      <!-- <view class="title">{{ item.name }}</view> -->
      <text class="detail-text">{{ item.description }}</text>
      <view class="bottom">
        <view>
          <TnIcon name="my-love" color="#bebebe" /><text>{{
            item.author
          }}</text>
        </view>
        <view>
          <TnIcon name="fire" color="#bebebe" /><text>{{ item.like }}</text>
        </view>
      </view>
    </view>
  </view>
  <TnPopup v-model="showPopup" open-direction="bottom">
    <view class="content_box">
      <view class="mian_box">
        <view class="top_icon_box">
          <view class="left_box" @tap="toEdit">
            <view class="icon_box">
              <TnIcon name="write-fill" color="#000000" size="50rpx" />
            </view>
            <view class="text">编辑</view>
          </view>
          <view class="right_box" @tap="toDeleteModal">
            <view class="icon_box">
              <TnIcon name="delete-fill" color="#000000" size="50rpx" />
            </view>
            <view class="text">删除</view>
          </view>
        </view>
        <view class="btn" @tap="closePop">取消</view>
      </view>
    </view>
  </TnPopup>
  <TnModal ref="modalRef" />
</template>

<script lang="ts" setup>
import { ref, defineProps, defineEmits, watch } from 'vue'
import { tnNavPage } from '@tuniao/tnui-vue3-uniapp/utils'
import { onLoad, onShow } from '@dcloudio/uni-app'
import {
  getRecent,
  getRecommend,
  getMyAgents,
  setUsage,
  deleteAgentById,
} from '@/services/api'
import type { TnModalInstance } from '@tuniao/tnui-vue3-uniapp'
import { useUserStore } from '@/stores'

const modalRef = ref<TnModalInstance>()
const props = defineProps({
  currentTabIndex: {
    type: Number,
    defalut: 0,
  },
})

const list = ref([])
const showPopup = ref(false)
const setAgentId = ref('')
const oneAgentDetial = ref({})

watch(
  () => props.currentTabIndex,
  (newProps) => {
    getData()
  }
)

onShow(() => {
  getData()
  showPopup.value = false
  setAgentId.value = ''
  oneAgentDetial.value = {}
})

const getData = () => {
  let params = {
    count: 100,
  }
  let paramsJson = {
    page: 1,
    pageSize: 999,
  }

  switch (props.currentTabIndex) {
    case 0:
      getRecent(params).then((res) => {
        const { code, data } = res
        if (code === 0) {
          list.value = data
        }
      })
      break
    case 1:
      getRecommend(params).then((res) => {
        const { code, data } = res
        if (code === 0) {
          list.value = data
        }
      })
      break
    case 2:
      getMyAgents(paramsJson).then((res) => {
        const { code, data } = res
        if (code === 0) {
          list.value = data
        }
      })
      break
    default:
      return '未知状态'
  }
}
const userStore = useUserStore()
const jumpDetailPage = (id) => {
  console.log(userStore.getIfBindSn)
  if (userStore.getIfBindSn) {
    setUsage(id).then((res) => {})
    tnNavPage(`/home-page/agent/detail?id=${id}`)
    // await userStore.checkUserSn()
  } else {
    userStore.toScanMate()
  }
}
// //调起微信小程序扫码
// const toScanMate = () => {
//   uni.scanCode({
//     onlyFromCamera: true, // 默认false，true为只允许从相机扫码
//     success: async (res) => {
//       console.info(res) //打印出来，查看自己想要的返回结果数据
//       // 拿SN码去绑定设备
//       await userStore.toBindUserSn(res.result)
//     },
//   })
// }
const toDeleteModal = () => {
  console.log('55')
  modalRef.value?.showModal({
    title: '删除数据',
    content: '是否删除数据，删除后将无法恢复，请谨慎操作',
    showCancel: true,
    maskClosable: true,
    cancel: () => {
      console.log('点击了取消按钮')
    },
    confirm: () => {
      console.log('点击了确认按钮')
      toDelete()
    },
  })
}
const setList = (item) => {
  if (userStore.getIfBindSn) {
    setAgentId.value = item.id
    oneAgentDetial.value = item
    showPopup.value = true
  } else {
    uni.showModal({
      title: '设备未激活',
      content: '学习英语需要长期坚持哦，超多权益等你来解锁',
      confirmText: '立即激活',
      cancelText: '放弃福利',
      success: function (res) {
        if (res.confirm) {
          console.log('用户点击确定')
          toScanMate()
        } else if (res.cancel) {
          console.log('用户点击取消')
          tnNavPage('/pages/index/index', 'switchTab')
        }
      },
    })
  }
}
const toEdit = () => {
  tnNavPage(`/home-page/agent/add?item=${JSON.stringify(oneAgentDetial.value)}`)
}
const toDelete = () => {
  deleteAgentById(setAgentId.value).then((res) => {
    const { code, data } = res
    if (code === 0) {
      uni.showToast({
        title: '删除成功',
        duration: 2000,
        icon: 'success',
      })
      closePop()
      getData()
      console.log(data)
      return true
    }
  })
}
const closePop = () => {
  setAgentId.value = ''
  showPopup.value = false
}
</script>

<style lang="scss" scoped>
.item-bar {
  display: flex;
  padding: 16rpx;
  margin: 30rpx;
  font-family: 'tuniao-xiaowei';
  .left-head {
    width: 140rpx;
    height: 140rpx;
    // border-radius: 50%;
    border-radius: 20rpx;
    margin-right: 30rpx;
    align-self: center;
  }
  .right-info {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: calc(100% - 170rpx);
    .top_box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title {
        font-weight: bold;
        font-size: 28rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 1;
        display: -webkit-box;
        -webkit-box-orient: vertical;
      }
    }
    .detail-text {
      font-size: 22rpx;
      margin: 6rpx 0;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
      display: -webkit-box;
      -webkit-box-orient: vertical;
    }
    .bottom {
      font-size: 20rpx;
      color: #bebebe;
      display: flex;
      justify-content: space-between;
    }
  }
}
.content_box {
  display: flex;
  justify-content: center;
  .mian_box {
    width: 70%;
    margin-top: 80rpx;
    .top_icon_box {
      display: flex;
      justify-content: space-between;
      .left_box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        margin-left: 30rpx;
        .icon_box {
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;
          border: 2rpx solid #ccc;
          background: #e5eeff;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-content: center;
        }
        .text {
          font-size: 30rpx;
          text-align: center;
          margin-top: 10rpx;
        }
      }
      .right_box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        margin-right: 30rpx;
        .icon_box {
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;
          border: 2rpx solid #ccc;
          background: #e5eeff;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-content: center;
        }
        .text {
          font-size: 30rpx;
          text-align: center;
          margin-top: 10rpx;
        }
      }
    }
    .btn {
      width: 100%;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      background: #e5eeff;
      color: #000;
      font-size: 30rpx;
      margin-top: 20rpx;
      border-radius: 20rpx;
    }
  }
}
</style>
